<template>
  <!-- 组件：
    1:导入组件  import 组件名  from '组件路径'
    2:注册组件  components:{组件名}
    3:当标签使用 <组件名></组件名>

    父传子:注意点：子组件内不可修改父组件传入的数据(单向数据流)
       传
          <子组件标签 :属性名=变量 ></子组件标签>
          <子组件标签 属性名=值 ></子组件标签>
       收
         子组件内
         props:['属性名']
     子传父：子组件内触发父组件内的方法
       绑定：<子组件标签 @方法名='父组件的方法' ></子组件标签>
       觓发：this.$emit('方法名',实参值,...)


-->

  <div class="app">
    <h3>我是app组件内容</h3>
    <MyProduct
      @setMoney="setMoney"
      v-for="item in list"
      :key="item.id"
      :item="item"
    ></MyProduct>
  </div>
</template>
<script>
import MyProduct from './components/MyProduct.vue'
export default {
  components: { MyProduct },
  data () {
    return {
      list: [
        { id: 1, proname: '超级好吃的棒棒糖', proprice: 18.8 },
        { id: 2, proname: '超级好吃的大鸡腿', proprice: 34.2 },
        { id: 3, proname: '超级无敌的冰激凌', proprice: 14.2 }
      ]
    }
  },
  methods: {
    setMoney (id, num) {
      // 通过id找出对应项的数据
      // findIndex 找出对应项数据的下标
      //  返回值= arr.findIndex((item,index,initArr)=>{return 条件}) 条件=true，返回该项下标
      const index = this.list.findIndex(item => {
        return item.id === id
      })
      this.list[index].proprice = num
    }
  }
}
</script>
<style></style>
